<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局</title>
    <style>
        .container{
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .container1{
            width: 400px;
            height: 300px;
            display: grid;
            grid-template-rows: auto 1fr auto;
            row-gap: 10px;   
        }
        .top{
            height: 30px;
            background-color: grey;
        }
        .center{
            background-color: grey;
        }
        .bottom{
            background-color: grey;
            height: 30px;
        }
        .container2{
            width: 400px;
            height: 300px;
            display: grid;
            grid-template-columns:auto 1fr;
            column-gap: 10px;
        }
        .left{
            background-color: grey; 
            width: 80px;
        }
        .right{
            background-color: grey;
        }
        .container3{
            width: 400px;
            height: 300px;
            display: grid;
            grid-template-rows: auto 1fr auto;
            row-gap: 10px; 
        }
        .main{
            display: grid;
            grid-template-columns: auto auto auto;
            column-gap: 10px;
        }
        .container3>header,footer{
            height: 75px;
            background-color: grey;
        }
        .leftside{
            background-color: grey;
        }
        .middle{
            background-color: grey;
        }
        .rightside{
            background-color: grey;
        }
        .container4{
            width: 400px;
            height: 300px;
            display: grid;
            grid-template-rows: auto 1fr auto;
            row-gap: 10px;
        }
        .container4>header{
            height: 60px;
            background-color: grey;
        }
        #main{
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            column-gap: 10px;
        }
        #middle{
            background-color: grey;
        }
        #left{
            background-color: grey;
        }
        #right{
            background-color: grey;
        }
        .container4>footer{
            height: 30px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="container1">
            <div class="top"></div>
            <div class="center"></div>
            <div class="bottom"></div>
       </div>
       <div class="container2">
            <div class="left"></div>
            <div class="right"></div>
       </div> 
       <div class="container3">
            <header></header>
            <div class="main">
                <div class="middle"></div>
                <div class="leftside"></div>
                <div class="rightside"></div>
            </div>
           <footer></footer>
       </div>   
       <div class="container4">
            <header></header>
            <div id="main">
                <div id="middle"></div>
                <div id="left"></div>
                <div id="right"></div>
            </div>
            <footer></footer>
       </div>
    </div>
</body>
</html>